<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
      function  ajax (options){
            //存储默认值
            var defaults ={
                type: 'get',
                url:'',
                data:{},
                header:{
                    'Content-Type':'application/x-www-form-urlenconded'
                },
                success:function(){},
                error:function(){}
            };
            //使用options对象中的属性覆盖defualts对象中的属性
            Object.assign(defaults,options);


          //创建ajax对象
          var xhr = new XMLHttpRequest();
          var params = '';

          for(var attr in defaults.data){
              params += attr + '=' + defaults.data[attr] + '&'
          }
          //截取字符串  将参数最后面的&符号截取掉
          params = params.substr(0,params.length-1)
          console.log(params);

          //判断请求方式
          if(defaults.type == 'get'){
            defaults.url = defaults.url + '?' + params;
          }
            //配置Ajax对象
          xhr.open(defaults.type,defaults.url);
          //如果请求方式为post
          if(defaults.type == 'post'){
              var contentType = defaults.header['Content-Type']
              //设置请求参数格式类型
              xhr.setRequestHeader('Content-Type',contentType);
              if(contentType == 'application/json'){
                  xhr.send(JSON.stringify(defaults.data))
              }else{
                  xhr.send(params);
              }
              
          }else{
              xhr.send();
          }
          xhr.onload = function(){

            // xhr.getResponseHeader()获取响应头中的参数
              var contentType = xhr.getResponseHeader('Content-Type');
              var responseText = xhr.responseText;
              //如果响应类型中包含application/json
              if(contentType.includes('application/json')){
                 responseText =  JSON.parse(responseText);
              }
              if(xhr.status ==200){
                defaults.success(responseText,xhr);
              }else{
                defaults.error(responseText,xhr);
              }
              
          }
      }
      ajax({
          //请求地址
          type:'get',
          url:'http://localhost:3000/responseData',
          success:function(data){
                console.log('这里是success函数'+data)
                console.log(data);
          }
      });

    //   ajax({
    //       type:'post',
    //       //请求地址
    //       url:'http://localhost:3000/first',
    //       data: {
    //         name:'张三',
    //         age:20
    //       },
    //       header:{
    //           'Content-Type':'application/json'
    //       },
    //       success:function(data){
    //             console.log('这里是success函数'+data)
    //       },
    //       error:function(data,xhr){
    //           console.log('这里是error函数'+data);
    //           console.log(xhr);
    //       }
    //   });

      /*
        请求参数要考虑的问题
            1.请求参数位置的问题
                将请求参数传递到ajax函数内部，
                在函数的内部，在函数内部根据请求方式的不同将请求参数放置在不同位置

                get 放置请求地址的后面
                post  放置在send里面

                2.请求参数格式问题
                    application/x-www-form-urlencoded
                        参数名称 = 参数值&参数名称=参数值
                    
                    application/json
                        {name:'zhangsan',age:20}
            1.传递对象数据类型对于函数的调用更加友好
            2.在函数内部对象数据类型转换为字符串更加方便
      */
    </script>
</body>
</html>